<template>
	<view class="box">
		<view class="head">
			<view class="head-img">
				<!-- 头像 -->
				<u-avatar :src="userInfo.avatar" size="147rpx"></u-avatar>
				<!-- 性别 -->
				<view class="gender" v-if="[1,2].includes(userInfo.sex)">
				<!-- <view class="gender" v-if="userInfo.sex==1 || userInfo.sex==2"> -->
					<image :src="sexImg[userInfo.sex-1]"  mode=""></image>
				</view>
				<!-- 志愿者勋章 -->
				<!-- <view class="gender" style="top: 0;" v-if="userInfo.vimg">
					<image :src="userInfo.vimg"  mode="" style="width: 30rpx;height: 30rpx;"></image>
				</view> -->
			</view>
			<view class="head-right">
				<view @click.stop="">
					<u-button text="编辑资料" shape="circle" class="customStyle custom_1" @click="toClick"></u-button>
				</view>
				<view @click.stop="" class="sign-in">
					<uni-transition mode-class="fade" :show="isShowSignTip">
						<view class="sign-in-tip f-xxs text-center">签到领元石</view>
					</uni-transition>
					<u-button :text="userInfo.isSign ? '签到中心' : '签到'" icon="../../static/qiandao.png" shape="circle"
					@click="handleSign()" color="#50CC60" class="customStyle">
					</u-button>
				</view>
			</view>
		</view>
		<view class="user-name m-b-20">
			<view class="user-name-top">
				<text>{{userInfo.nickname}}</text>
				<view class="user-name-top-right" v-if="userInfo.vimg">
					<image :src="userInfo.vimg"  mode="" style="width: 30rpx;height: 30rpx;"></image>
				</view>
			</view>
			<view class="user-name-bottom">
				<text>{{userInfo.sign}}</text>
			</view>
		</view>
		<view class="user-msg">
			<view class="statistical">
				<view class="focus flex-no-horizontal" @click.stop="myFocus">
					{{userRelation.following}}
					<text>关注</text>
				</view>
				<view class="fans flex-no-horizontal" @click.stop="myFans">
					{{userRelation.follower}}
					<text>粉丝</text>
				</view>
				<view class="like flex-no-horizontal">
					{{userRelation.likeNum}} 
					<text>点赞</text>
				</view>
			</view>
			<view class="card-info">
				<view class="card-number">
					居民卡编号:
					<text>{{userInfo.code}}</text>
				</view>
				
				<view  v-if="shopOpenType == '1'">
					<view class="card-address" @click.stop="onGoto()" v-if="userInfo">
						<view class="addressLeft">
							区块链地址:
							<text v-if="!isAttestErr && userInfo.idCard && addressInfo[0]">{{addressInfo[0].address}}</text>
							<text style="color: #6A7075!important;" v-else-if="!userInfo.idCard">请先实名</text>
						</view>
						<view class="addressRight">
							<text v-if="isAttestErr" class="red">实名认证信息有误，请重新认证</text>
							<text v-else-if="userInfo.idCard && !isAttestErr">查看完整地址</text>
							<text v-else>去实名认证</text>
							<u-icon size="15" :bold="isAttestErr ? false : true" name="arrow-right" :color="isAttestErr ? '#FF5442' : ''"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <yuanshi-sign :show="isShowSign" :stone="stone" :day="day" @close="isShowSign = false"></yuanshi-sign> -->
	</view>

</template>

<script>
	import {sign} from '../../../api/collection.js'
	import { shop_open } from '../../../api/apiH5.js';
	import {
		blockchainAddress
	} from '../../../api/user.js'
	import {ifLoginFun} from '../../../utility/weChatLogin.js'
	import AttestStatus from '@/common/mixin/attestError.js'
	export default {
		mixins: [AttestStatus],
		props:{
			userInfo:{
				type:Object,
				default:()=>{}
			},
			userRelation:{
				type:Object,
				default:()=>{}
			},
			isShowSignTip: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				shopOpenType: '',//是否展示 IOS审核隐藏
				src: '/static/logo.png',
				sexImg:['/static/img/man.png', '/static/img/woman.png',],
				// isShowSign: true,
				// stone: 0,
				// day: 1,
				isSign: this.userInfo.isSign,
				addressInfo: []
			};
		},
		computed: {

		},
		created() {
			this.onGetAddress();
			this.onShopOpenType();
		},
		mounted() {
			uni.$on('attestAginSuccess', () => {
				console.log('我见听到了')
				this.getAttestErr()
			})
		},
		destroyed() {
			uni.$off('attestAginSuccess')
		},
		methods: {
			//是否展示
			async onShopOpenType() {
				try {
					const res = await shop_open();
					this.shopOpenType = res.data.data;
				} catch (e) {
					console.log(e);
				}
			},
			async onGetAddress(){
				if (!ifLoginFun()) return
				try{
					const res = await blockchainAddress()
					this.addressInfo = res.data
				} catch(e) {
					uni.showToast({
						title: e.data || e.message,
						icon: 'none'
					})
				}
			},
			onGoto(){
				if (this.isAttestErr) {
					this.toAttestAgin()
				}else if(this.userInfo.idCard){
					uni.navigateTo({
						url:"/pages/user/addressPage"
					})
				} else {
					uni.navigateTo({
						url: '/pages/user/realName'
					})
				}
			},
			handleSign () {
				if (!ifLoginFun()) return
				if (this.userInfo.isSign) {
					uni.navigateTo({
						url: '/pages/user/calender'
					})
				} else {
					this.$emit('handleSign')
				}
				// try{
				// 	const res = await sign()
				// 	this.isShowSign = true
				// 	this.stone = res.data.store
				// 	this.day = res.data.day
				// 	let data= {
				// 		isShowSign: this.isShowSign,
				// 		stone: this.stone,
				// 		day: this.day
				// 	}
				// } catch(e) {
				// 	uni.showToast({
				// 		title: e.data || e.message,
				// 		icon: 'none'
				// 	})
				// 	console.log(e)
				// }
			},
			myFocus(){
				if (!ifLoginFun()) return
				uni.navigateTo({
					url:"./myFocus"
				})
			},
			myFans(){
				if (!ifLoginFun()) return
				uni.navigateTo({
					url:"./myFans"
				})
			},
			like(){
				if (!ifLoginFun()) return
				uni.navigateTo({
					url:'../community/like'
				})
			},

			toClick(){
				this.$emit("handleClick")
			}
		},
	};
</script>

<style lang="scss" scoped>
	.box {
		z-index: 0!important;
		.red{
			color: #FF5442;
		}
		.head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.head-img {
				width: 147rpx;
				height: 147rpx;
				position: relative;
				.gender {
					width: 42rpx;
					height: 42rpx;
					background: #E5EDF2;
					border: 2rpx solid #FFFFFF;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					bottom: 0;
					right: 0;

					&>image {
						width: 22rpx;
						height: 22rpx;

					}
				}
			}

			.head-right {
				display: flex;

				.customStyle {
					height: 60rpx;
				}

				.custom_1 {
					margin-right: 20rpx;
				}
				
				.sign-in{
					position: relative;
					margin-left: 20rpx;
					.sign-in-tip{
						position: absolute;
						padding: 6rpx 20rpx;
						background-color: #000000;
						border-radius: 40rpx;
						color: #ffffff;
						top: -30px;
						// width: 130rpx;
						width: max-content;
						&::after{
							content: '';
							position: absolute;
							border: 5px solid black;
							left: 45%;
							bottom: -10px;
							border-right-color:transparent;
							border-bottom-color: transparent;
							border-left-color: transparent;
						}
					}
				}
			}

		}

		.user-name {
			.user-name-top {
				display: flex;
				margin: 40rpx 0 29rpx 0;

				&>text {
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					font-size: 40rpx;
					font-family: PingFang SC;
					font-weight: 800;
					margin-right: 20rpx;
				}

				.user-name-top-right {
					display: flex;
					align-items: center;
					justify-content: space-around;
					image{
						margin-right: 10rpx;
					}
				}
			}
		}
		.user-name-bottom{
			&>text{
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #6A7075;
			}
			margin-bottom: 28rpx;
		}
	    .user-msg{
			.statistical{
				display: flex;
				align-items: center;
				padding: 28rpx 0 40rpx 0;
				// border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
				.focus,
				.fans,
				.like{
					display: flex;
					justify-content: space-between;
					align-items: center;
					text{
						display: block;
						font-size: 26rpx;
						font-family: DIN;
						font-weight: 500;
						margin-left: 5rpx;
					}
					text:nth-of-type(2){
						color: #6A7075;
					}
				}
				.focus{
					padding: 0rpx 65rpx 0rpx 4rpx;
				}
				.fans{
					padding-right: 67rpx;
				}
				
			}
			
			.card-info{
				margin-bottom: 60rpx;
				.card-number,
				.card-address{
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
				}
				.card-address{
					display: flex;
					justify-content: space-between;
					.addressLeft{
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						max-width: 400rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
						text{
							margin-left: 10rpx;
						}
					}
					.addressRight{
						display: flex;
						text{
							margin-right: 10rpx;
						}
					}
				}
				.card-number{
					margin:44rpx 0 29rpx 0;
					text{
						margin-left: 10rpx;
					}
				}
			}
		}
		
	}
</style>
